import Card from '@/components/Card';
import styles from '@/pages/BatteryHealthEvaluate/SaveEvaluate/index.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Flex, Popover } from 'antd';
import { MathComponent } from 'mathjax-react';
import React from 'react';

const StandardDescription: React.FC = () => {
  const intl = useIntl();
  return (
    <>
      <Popover
        title={false}
        placement={'bottomRight'}
        content={
          <div>
            <a>{intl.formatMessage({ id: 'batteryVoltage.GBTitle' })}</a>
            <Card
              title={intl.formatMessage({ id: 'batteryVoltage.GBTitleS' })}
              style={{ marginTop: '20px' }}
            >
              <Flex justify={'space-around'}>
                <div className={styles.ruleText}>
                  <div>
                    <MathComponent tex={'EAF={\\frac 1P\\sum_{i=1}^nP_i}\\times{EAF_i}'} />
                  </div>
                  <ul>
                    <li>{intl.formatMessage({ id: 'batteryVoltage.GBR1' })}</li>
                    <li>
                      <div>
                        <MathComponent tex={'EAF'} />
                      </div>
                      <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR2' })}</div>
                    </li>
                    <li>
                      <div>
                        <MathComponent tex={'P'} />
                      </div>
                      <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR3' })}</div>
                    </li>
                    <li>
                      <div>
                        <MathComponent tex={'P_i'} />
                      </div>
                      <div> ————{intl.formatMessage({ id: 'batteryVoltage.GBR4' })}</div>
                    </li>
                    <li>
                      <div>
                        <MathComponent tex={'EAF_i'} />
                      </div>
                      <div> ————{intl.formatMessage({ id: 'batteryVoltage.GBR5' })}</div>
                    </li>
                  </ul>
                </div>
                <div className={styles.ruleText}>
                  <div>
                    <MathComponent
                      tex={'EAF_i=\\frac{E_{Ci}+E_{Di}}{P_i\\cdot PH}\\times 100\\%'}
                    />
                  </div>
                  <ul style={{ marginTop: '24px' }}>
                    <li>{intl.formatMessage({ id: 'batteryVoltage.GBR1' })}</li>
                    <li>
                      <div>
                        <MathComponent tex={'E_{Ci}'} />
                      </div>
                      <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR6' })}</div>
                    </li>
                    <li>
                      <div>
                        <MathComponent tex={'E_{Di}'} />
                      </div>
                      <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR7' })}</div>
                    </li>
                    <li>
                      <div>
                        <MathComponent tex={'P_i'} />
                      </div>
                      <div> ————{intl.formatMessage({ id: 'batteryVoltage.GBR8' })}</div>
                    </li>
                    <li>
                      <div>
                        <MathComponent tex={'PH'} />
                      </div>
                      <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR9' })}</div>
                    </li>
                  </ul>
                </div>
              </Flex>
            </Card>
            <Card
              title={intl.formatMessage({ id: 'batteryVoltage.GBR10' })}
              style={{ marginTop: '20px' }}
            >
              <div className={styles.ruleCalText}>
                <div className={styles.ruleCalTextTitle}>
                  <MathComponent
                    display={false}
                    tex={'\\eta_{EESS}= \\frac{E_{on}}{E_{off}}\\times100\\%'}
                  />
                </div>
                <ul>
                  <li>{intl.formatMessage({ id: 'batteryVoltage.GBR1' })}</li>
                  <li>
                    <div>
                      <MathComponent tex={'\\eta_{EESS}'} />
                    </div>
                    <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR11' })}</div>
                  </li>
                  <li>
                    <div>
                      <MathComponent tex={'E_{on}'} />
                    </div>
                    <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR12' })}</div>
                  </li>
                  <li>
                    <div>
                      <MathComponent tex={'E_{off}'} />
                    </div>
                    <div>————{intl.formatMessage({ id: 'batteryVoltage.GBR13' })}</div>
                  </li>
                </ul>
              </div>
            </Card>
          </div>
        }
      >
        <a href={'#'}>
          <QuestionCircleOutlined />
          &nbsp;{intl.formatMessage({ id: 'batteryVoltage.vol.standard' })}
        </a>
      </Popover>
    </>
  );
};

export default StandardDescription;
